<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Bootstrap 实例 - 边框表格</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <button
      id="add"
      class="btn btn-primary btn-lg"
      data-toggle="modal"
      data-target="#myModal"
    >
      增加
    </button>
    <!-- 模态框（Modal） -->
    <div
      class="modal fade"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-hidden="true"
            >
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
          </div>
          <div class="modal-body">
            <div><span>名称</span><input id="name" /></div>
            <div><span>城市</span> <input id="city" /></div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
            <button id="determine" type="button" class="btn btn-primary">
              提交更改
            </button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal -->
    </div>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>名称</th>
          <th>城市</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr>
        <tr>
          <td>Sachin</td>
          <td>Mumbai</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr> -->
      </tbody>
    </table>
    <script>
      const data = [
        { id: 1, name: "李四", city: "重庆" },
        { id: 2, name: "张三", city: "成都" },
      ];
      function render(data) {
        for (let i = 0; i < data.length; i++) {
          let item = data[i];
          $("tbody").append(
            `<tr>
          <td>${item.name}</td>
          <td>${item.city}</td>
          <td>
            <button data-id="${item.id}" type="button" 
        class="delete-btn" class="btn btn-danger ">删除</button>
            <button data-id="${item.id}" type="button" data-toggle="modal"
      data-target="#myModal" class="modify-btn" class="btn btn-info">修改</button>
          </td>
        </tr>
            `
          );
        }
      }
      render(data);
      //   编辑
      $("table tbody").on("click", ".modify-btn", function (event) {
        const dataId = parseInt($(event.target).attr("data-id"));
        console.log(dataId);
        for (let i = 0; i < data.length; i++) {
          if (data[i].id === dataId) {
            $("#name").val(data[i].name);
            $("#city").val(data[i].city);
          }
        }
        // const obj = {
        //   name: $("#name").val(),
        //   city: city.value,
        // };
        // data.splice(dataId - 1, 1, obj);
        $("#determine").on("click", function () {
          const obj = {
            id: dataId,
            name: $("#name").val(),
            city: city.value,
          };
          data.splice(dataId - 1, 1, obj);
          //   清除页面
          $("tbody").empty();
          render(data);
        });
      });
      //增加
      $("#add").on("click", function () {
        
        $("#determine").on("click", function () {
          let newName = $("#name").val();
          let newCity = $("#city").val();
          let newId = data.length + 1;
          const obj = {
            id: newId,
            name: newName,
            city: newCity,
          };
          data.push(obj);
          $("tbody").empty();
          render(data);
          $("#name").val("");
         $("#city").val("");
        });
      });
    //   删除
    $("table tbody").on("click",".delete-btn",function(event){
        const dataId = parseInt($(event.target).attr("data-id"));
        for(let i=0;i<data.length;i++){
            if(data[i].id===dataId){
                data.splice(i,1);
            }
            
        }
        $("tbody").empty();
          render(data);
    })
    </script>
  </body>
</html>
